<template lang="jade">
div(class="panel panel-default")
    div(class="panel-heading")
        h3(class="panel-title") 属性列表 

    div(class="panel-body")
        input(
            class="form-control",
            type="text",
            @keyup.enter="add_property"
            v-model="property.name"
            placeholder="输入属性名称,按回车键添加到列表中")

    ul(class="list-group")
        li(class="list-group-item clearfix",v-for="(property,index) in properties")
            div(class="pull-left")
                a(href="javascript:void()",@click="seleced(property)") {{property.name}}
                div
                    span(v-for="item in property.items",
                         class="label label-info") {{item.name}}
            div(class="pull-right") 
                a(href="javascript:void()",title="删除",@click="remove_property(index)")
                    i(class="glyphicon glyphicon-trash text-danger")
                    
</template>
<script type="text/javascript">
    import Property from '../models/_property'

	export default {

        data(){
            return{
                property: new Property()
            }
        },

        props:{
            properties: {type:Array, default: []}
        },

        model:{
            prop:'properties',
            event: 'update'
        },

		methods:{
			add_property: function(){
                var copy = _.extend({}, this.property);
                var index =  _.findIndex(this.properties, (property)=>{
                    return property._id == copy._id;
                });
                if(index === -1)
                    this.properties.push(copy);
                else
                    this.properties.splice(index,1,copy);
                this.property = new Property();
            },
            seleced: function(property){
                this.property =_.extend({}, property);
                this.$emit('selected', property);
            },
            remove_property(index){
                this.properties.splice(index,1);
            }
		}
	}
</script>
<style class="scss">
    .list-group .label{
        margin-right: 5px;
    }
</style>